<template>
    <el-row>
        <el-col :span="6">
            <el-statistic :value="summaryData.goingActivityCount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        <h1 class="large-title">市场活动</h1>
                    </div>
                </template>
                <template #suffix>/{{ summaryData.totalActivityCount }}</template>
            </el-statistic>
        </el-col>

        <el-col :span="6">
            <el-statistic :value="summaryData.totalClueCount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        <h1 class="large-title">线索总数</h1>
                    </div>
                </template>
            </el-statistic>
        </el-col>

        <el-col :span="6">
            <el-statistic :value="summaryData.totalCustomerCount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        <h1 class="large-title">客户总数</h1>
                    </div>
                </template>
            </el-statistic>
        </el-col>

        <el-col :span="6">
            <el-statistic :value="summaryData.successTranAmount">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        <h1 class="large-title">交易总额</h1>
                    </div>
                </template>
                <!--                <template #suffix>/{{ formatNumber(summaryData.totalTranAmount) }}</template>-->
                <template #suffix>/{{ formatNumber(summaryData.totalTranAmount) }}</template>
            </el-statistic>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
            <!-- 销售漏斗页面 -->
            <div id="saleFunnelChart"
                 style="width: 1000px; height: 1000px; display: flex; justify-content: center; align-items: center">
            </div>
        </el-col>
        <el-col :span="12">
            <!-- 线索来源饼图 -->
            <div id="cluePieChart"
                 style="width: 1000px; height: 1000px; display: flex; justify-content: center; align-items: center">
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {doGet} from "../http/httpRequest.js";
import {showMessage} from "../util/message.js";
import * as echarts from 'echarts';

// 定义响应式数据变量，用于存储页面展示的统计数据
let summaryData = ref({});

// 在组件挂载时加载所有需要的数据
onMounted(() => {
    loadSummaryData();
    loadSaleFunnelData();
    loadCluePieData();
})

/**
 * 加载统计数据
 */
const loadSummaryData = () => {
    doGet('/api/summary/data', {}).then(resp => {
        if (resp.data.code == 200) {
            summaryData.value = resp.data.info;
        } else {
            showMessage(resp.data.msg, 'error');
        }
    })
}

// /**
//  * 加载销售漏斗数据
//  */
const loadSaleFunnelData = () => {
    doGet('api/sale/funnel', {}).then(resp => {
        if (resp.data.code == 200) {
            // 获取接口返回的漏斗图数据
            let funnelData = resp.data.info
            // 获取销售漏斗图表容器DOM元素
            let chartDom = document.getElementById('saleFunnelChart')
            // 初始化ECharts实例
            let myChart = echarts.init(chartDom)
            // 配置图表选项
            let option = {
                title: {
                    text: '销售漏斗'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                },
                legend: {
                    data: ['线索', '客户', '交易', '成交']
                },
                series: [
                    {
                        name: '销售漏斗',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: funnelData
                    }
                ]
            };
            // 应用配置项并渲染图表
            option && myChart.setOption(option);
        }
    })
}


/**
 * 加载线索来源饼图数据
 */
const loadCluePieData = () => {
    doGet('api/clue/pie', {}).then(resp => {
        if (resp.data.code == 200) {
            // 获取接口返回的饼图数据
            let pieChartData = resp.data.info
            // 获取线索来源图表容器DOM元素
            let chartDom = document.getElementById('cluePieChart')
            // 初始化ECharts实例
            let myChart = echarts.init(chartDom)
            // 配置饼图选项
            let option = {
                title: {
                    text: '线索来源',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '线索来源',
                        type: 'pie',
                        radius: '50%',
                        data: pieChartData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            // 应用配置项并渲染图表
            option && myChart.setOption(option);
        }
    })
}


/**
 * 格式化数字为带逗号的字符串
 * @param num 要格式化的数字
 * @returns 格式化后的字符串
 */
const formatNumber = (num) => {
    if (num === null || num === undefined) return '0';
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
</script>

<style scoped>
.el-col {
    text-align: center;
}

/* 添加大标题样式 */
.large-title {
    font-size: 24px; /* 原来的2倍大小 */
    font-weight: bold;
}
</style>